<template>
	<div>
		<div class="" style="overflow-x: hidden;">
			<div>
				<div id="canvasDiv" class="canvasDiv" style="width:100%">
					<canvas id="confernceWhiteboard" width="500" height="250"></canvas>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import Wbcolor from '../components/Wbcolor';
import message from '../../static/js/message';
export default {
	// eslint-disable-next-line vue/no-unused-components
	components: { Wbcolor },
	data() {
		return {
			drawType: null,
			whiteboardCanvas: null,
			chache: null,
			textbox: null,
			drawingObject: null,
			mouseFrom: {},
			mouseTo: {},
			doDrawing: false,
			moveCount: 1,
			drawWidth: 2,
			color: '#E34F51',
			colorset: false,
			zoom: window.zoom ? window.zoom : 1
		};
	},
	props: ['mark'],
	mounted() {
		var self = this;
		message.$on('receiveMessage', function(message) {
			console.log('white message', message);
			self.showCache(message);
		});
		// eslint-disable-next-line no-undef
		this.whiteboardCanvas = new fabric.Canvas('confernceWhiteboard');
		this.whiteboardCanvas.skipTargetFind = true; //画板元素不能被选中
		this.whiteboardCanvas.selection = false; //画板不显示选中
	},
	methods: {
		showCache(data) {
			this.whiteboardCanvas.setZoom(0.5);
			this.whiteboardCanvas.loadFromJSON(JSON.parse(data || this.chache));
			this.whiteboardCanvas.renderAll();
			this.whiteboardCanvas.skipTargetFind = true; //画板元素不能被选中
			this.whiteboardCanvas.selection = false; //画板不显示选中
		}
	}
};
</script>

<style scoped>
/*@import "../../static/css/normal.css";*/
/*@import "../../static/css/whiteboard.css";*/

.tools {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tools li {
	/*width: 100%;*/
	width: 60px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	font-size: 28px;
	background: rgba(44, 48, 64, 1);
	cursor: pointer;
	position: relative;
	opacity: 1;
}

.tools li:hover {
	/*background: #f2f1f2;*/
	background: rgba(0, 0, 0, 1);
	opacity: 0.8;
}

.tools li.active {
	/*background: #e34f51;*/
	background: rgba(0, 0, 0, 1);
	opacity: 0.86;
}

.hide {
	display: none;
}

.canvasDiv {
	position: relative;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0); /*关键点*/
}

.icon-tools {
	display: inline-block;
	width: 28px;
	height: 28px;
	/*background-image: url("../../static/whiteboardimg/pan_icon.png");*/
	background-repeat: no-repeat;
	margin-top: 10px;
}

.icon-draggle-black {
	background-image: url('../../static/whiteboardimg/yidong-3.png');
}

.icon-draggle-select {
	background-image: url('../../static/whiteboardimg/yidong-3.png');
}

.icon-pan {
	background-image: url('../../static/whiteboardimg/pan_icon.png');
}

.icon-arrow {
	background-image: url('../../static/whiteboardimg/down-jiantou.png');
}

.icon-pen-black {
	background-image: url('../../static/whiteboardimg/pan_icon.png');
}

.icon-pen-select {
	background-image: url('../../static/whiteboardimg/pan_icon.png');
}

.icon-text-black {
	background-image: url('../../static/whiteboardimg/txt.png');
}

.icon-text-select {
	background-image: url('../../static/whiteboardimg/txt.png');
}

.icon-line-black {
	background-image: url('../../static/whiteboardimg/line.png');
}

.icon-line-select {
	background-image: url('../../static/whiteboardimg/line.png');
}

.icon-dottedline-black {
	background-image: url('../../static/whiteboardimg/xuxian.png');
}

.icon-dottedline-select {
	background-image: url('../../static/whiteboardimg/xuxian.png');
}

.icon-arrow-black {
	background-image: url('../../static/whiteboardimg/down-jiantou.png');
}

.icon-arrow-select {
	background-image: url('../../static/whiteboardimg/down-jiantou.png');
}

.icon-circle-black {
	background-image: url('../../static/whiteboardimg/yuan-2.png');
}

.icon-circle-select {
	background-image: url('../../static/whiteboardimg/yuan-2.png');
}

.icon-ellipse-black {
	background-image: url('../../static/whiteboardimg/tuoyuan.png');
}

.icon-ellipse-select {
	background-image: url('../../static/whiteboardimg/tuoyuan.png');
}

.icon-square-black {
	background-image: url('../../static/whiteboardimg/juxing.png');
}

.icon-square-select {
	background-image: url('../../static/whiteboardimg/juxing.png');
}

.icon-rectangle-black {
	background-image: url('../../static/whiteboardimg/juxing.png');
}

.icon-rectangle-select {
	background-image: url('../../static/whiteboardimg/juxing.png');
}

.icon-rightangle-black {
	background-image: url('../../static/whiteboardimg/zhijiaosanjiaoxing.png');
}

.icon-rightangle-select {
	background-image: url('../../static/whiteboardimg/zhijiaosanjiaoxing.png');
}

.icon-equilateral-black {
	background-image: url('../../static/whiteboardimg/sanjiaoxing.png');
}

.icon-equilateral-select {
	background-image: url('../../static/whiteboardimg/sanjiaoxing.png');
}

.icon-isosceles-black {
	background-position: -196px -112px;
}

.icon-isosceles-select {
	background-position: -0px -140px;
}

.icon-isoscelesrighttriangle-black {
	background-position: -28px -140px;
}

.icon-isoscelesrighttriangle-select {
	background-position: -56px -140px;
}

.icon-remove-black {
	background-image: url('../../static/whiteboardimg/xiangpica.png');
}

.icon-remove-select {
	background-image: url('../../static/whiteboardimg/xiangpica.png');
}

.icon-clear-black {
	background-position: -140px -140px;
}

.icon-clear-select {
	background-position: -168px -140px;
}

.video-preview-modal-div {
	width: 69%;
	margin: 5% auto 0;
	text-align: center;
	background-color: #ffffff;
}

/********* 添加对错号 **************/
.icon-right-black {
	display: inline-block;
	width: 26px;
	height: 26px;
	background-image: url(../../static/whiteboardimg/right.png);
	background-repeat: no-repeat;
	margin-top: 10px;
}

.icon-right-select {
	display: inline-block;
	width: 26px;
	height: 26px;
	background-image: url(../../static/whiteboardimg/right-sel.png);
	background-repeat: no-repeat;
	margin-top: 10px;
}

.icon-wrong-black {
	display: inline-block;
	width: 26px;
	height: 26px;
	background-image: url(../../static/whiteboardimg/wrong.png);
	background-repeat: no-repeat;
	margin-top: 10px;
}

.icon-wrong-select {
	display: inline-block;
	width: 26px;
	height: 26px;
	background-image: url(../../static/whiteboardimg/wrong-sel.png);
	background-repeat: no-repeat;
	margin-top: 10px;
}

.icon-right-small-black {
	display: inline-block;
	width: 28px;
	height: 28px;
	background-image: url(../../static/whiteboardimg/right-small.png);
	background-repeat: no-repeat;
	margin-top: 10px;
}

.icon-right-small-select {
	display: inline-block;
	width: 28px;
	height: 28px;
	background-image: url(../../static/whiteboardimg/right-small-sel.png);
	background-repeat: no-repeat;
	margin-top: 10px;
}

.icon-wrong-small-black {
	display: inline-block;
	width: 28px;
	height: 28px;
	background-image: url(../../static/whiteboardimg/wrong-small.png);
	background-repeat: no-repeat;
	margin-top: 10px;
}

.icon-wrong-small-select {
	display: inline-block;
	width: 28px;
	height: 28px;
	background-image: url(../../static/whiteboardimg/wrong-small-sel.png);
	background-repeat: no-repeat;
	margin-top: 10px;
}

.icon-submit-black {
	display: inline-block;
	width: 28px;
	height: 28px;
	background-image: url(../../static/whiteboardimg/submit.png);
	background-repeat: no-repeat;
	margin-top: 10px;
}

.icon-submit-select {
	display: inline-block;
	width: 28px;
	height: 28px;
	background-image: url(../../static/whiteboardimg/submit-sel.png);
	background-repeat: no-repeat;
	margin-top: 10px;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.btn {
	width: 200px;
	height: 40px;
	border: 0px solid black;
	background-color: #e1e1e1;
	line-height: 40px;
	color: white;
	text-align: center;
	font-size: 16px;
}

.btnwh {
	width: 200px;
	height: 40px;
}

.tipwh {
	width: 400px;
	height: 40px;
}

.default-color {
	background-color: #2579d1;
}

.btn:hover {
	background-color: #2579d1;
}

.btn:focus {
	background-color: #2579d1;
	/*#00ff00;*/
}

.btn:active {
	background-color: #000000;
}

.flex-conlumn-center {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.margin-left20 {
	margin-left: 20px;
}

.flex-conlumn-start {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
}

.self-item {
	align-self: flex-start;
}

.flex-row-center {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	/*background-color: red;*/
}

.flex-row-start {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	/*background-color: red;*/
}

.margin-top10 {
	margin-top: 10px;
}

.w100h40 {
	width: 100px;
	height: 40px;
}

.w150h40 {
	width: 150px;
	height: 40px;
}

.w120h40 {
	width: 120px;
	height: 40px;
}

.w300h40 {
	width: 300px;
	height: 40px;
}

.w160h40 {
	width: 160px;
	height: 40px;
}

.margin-left10 {
	margin-left: 10px;
}
.margin-left20 {
	margin-left: 20px;
}

.w70h40 {
	width: 70px;
	height: 40px;
}

.w50h40 {
	width: 50px;
	height: 40px;
}

.normal-text {
	font-size: 15px;
	color: #333333;
	height: 30px;
	line-height: 30px;
}

.tip-text {
	color: #2579d1;
	font-size: 13px;
	height: 40px;
}

.h40 {
	height: 40px;
}

.margin-top20 {
	margin-top: 20px;
}

.margin-top40 {
	margin-top: 40px;
}

.input-normal-w250 {
	border: 0.5px solid #999999;
	width: 250px;
	height: 40px;
	text-indent: 10px;
}

.input-normal {
	border: 0.5px solid #999999;
	width: 300px;
	height: 40px;
	text-indent: 10px;
}

.narrow {
	width: 50px;
	height: 50px;
	background-color: #242020;
	border-radius: 25px;
	line-height: 50px;
	position: absolute;
	right: 5px;
	bottom: 20px;
	cursor: pointer;
	z-index: 1;
	color: #fff;
}

button {
	display: block;
	margin: auto;
	margin-top: 10px;
	clear: both;
}

.op {
	width: 100%;
	height: 50px;
	background: rgba(31, 33, 45, 1);
}

#nav {
	width: 660px;
	height: 50px;
	background: rgba(31, 33, 45, 1);
	margin: 0 auto;
	position: relative;
}

.texcolor {
	/*margin-left: 30px;*/
	left: 35px;
	bottom: 45px;
	position: absolute;
	z-index: 2;
}

#nav ul {
	list-style: none;
	border-radius: 24px;
	/*margin-left: 50px;*/
}

#nav li {
	display: inline;
	line-height: 50px;
	float: left;
}

.exit {
	margin-bottom: 10px;
	margin-right: 0px;
}

.row::before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.row canvas {
	border: 2px solid black;
}
</style>
